/**
 * Created by zzy on 2018/2/8.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    DeviceEventEmitter,
    TextInput,
    StyleSheet,
    Button,
    ScrollView,
    Dimensions,
    Alert
} from 'react-native';
import {observable, action, computed, observe} from 'mobx'
import {observer} from 'mobx-react/native'
import Constant from "../../js/Contant";
import {GradientButton} from "../../js/component/Button";
import RequestUtil from "../../js/util/NetUtil";
import {GetWechatMsg} from '../../js/order/OrderNet'
const ScreenW = Dimensions.get('window').width;

@observer
class SetupHead extends Component {
    render(){
        return <View style={{marginTop:10,alignItems:'center'}}>
            <Image style={{width:75,height:75,backgroundColor:'black'}} source={{uri:this.props.userIconUrl}}/>
            <Text style={{marginTop:10,fontSize:13.5,color:'rgba(51,51,51,1)'}}>{this.props.userName}</Text>
            <View style={{flexDirection:'row',height:30}}/>
        </View>
    }
}

const Input = ({value,title='',placeholder,onChangeText,keyboardType='default',secureTextEntry=false})=>{
    return <View style={{width:ScreenW,height:50.5}}>
        <View style={{flexDirection:'row',alignItems:'center',paddingHorizontal:15,height:50,backgroundColor:'white'}}>
            <View style={{flex:1}}>
                <Text style={{fontSize:14,color:'rgba(51,51,51,1)'}}>{title}</Text>
            </View>
            <View style={[{marginLeft:10,height:40,backgroundColor:'white',flex:5}]}>
                <TextInput
                    clearTextOnFocus={true}
                    style={{fontSize:14,fontWeight:'400',height:40,color:'rgba(51,51,51,1)'}}
                    value={value}
                    keyboardType={keyboardType}
                    secureTextEntry={secureTextEntry}
                    placeholder={placeholder}
                    onChangeText={onChangeText}/>
            </View>
        </View>
        <View style={{flexDirection:'row',marginLeft:12,width:ScreenW-24,height:0.5,backgroundColor:'rgba(217,217,217,1)'}}/>
    </View>
};

const LoginBtn = ({onPress})=>{
    return <TouchableOpacity style={{justifyContent:'center',alignItems:'center',marginTop:35,width:ScreenW-30,height:40,backgroundColor:'#14c2fc'}}
                             onPress={onPress}>
        <Text style={{fontSize:15,color:'white'}}>注册</Text>
    </TouchableOpacity>
};

class BottomAttention extends Component {
    render(){
        return <View style={{alignItems:'center',marginBottom:14,height:30}}>
            <Text style={{fontSize:12,color:'rgba(51,51,51,1)'}}>点击上面的"注册"按钮，即表示你同意</Text>
            <TouchableOpacity>
                <Text style={{fontSize:12,color:'#14c2fc'}}>《汇贝软件许可及服务协议》</Text>
            </TouchableOpacity>
        </View>
    }
}

@observer
export default class SendCheckCode extends Component{
    @observable userIconUrl = '';
    @observable userName = '';
    constructor(props){
        super(props) ;
        this.phoneNum = null ;
    }
    componentDidMount(){
        this.loadWechatUserMag();
    }
    loadWechatUserMag(){
        RequestUtil.requestData('user/weixinMsg',{}).then((result)=>{
            this.userIconUrl=result.userIconUrl;
            this.userName=result.userName;
        })
    };
    render(){
        return <View style={{flex:1,justifyContent:'space-between',alignItems:'center',backgroundColor:'white'}}>
            <View style={{width:ScreenW,alignItems:'center'}}>
                <SetupHead
                    userIconUrl={this.userIconUrl}
                    userName={this.userName}/>
                <Input
                    title='+86'
                    placeholder="请填写手机号"
                    onChangeText={(text)=>{
                        this.phoneNum = text ;
                    }}/>
                <LoginBtn onPress={()=>{
                    if(this.phoneNum==null)return;
                    Alert.alert('确认手机号码','我们将发送验证码到该手机号：'+this.phoneNum,[{text:'取消',onPress:()=>{}},{text:'好',onPress:()=>{
                        RequestUtil.requestData('checkCode/login', {
                            phoneNum: this.phoneNum
                        }).then((result) => {
                            this.props.navigation.navigate('BindPhoneNum',{
                                phoneNum:this.phoneNum
                            });
                        })}}]);
                }}/>
            </View>

            <BottomAttention />
        </View>
    }
}

const styles = {
    borderBottom: {
        borderBottomColor: Constant.SEPLINECOLOR,
        borderBottomWidth: StyleSheet.hairlineWidth
    },
}
